<template>
  <view class="container">
    <view>
      <view class="background-white">
        <view class="flex text bor-btm">
          任务名称：<text>{{ baseInfo.taskName }}</text>
        </view>
        <view class="flex text bor-btm">
          巡检类型：<text>{{ baseInfo.inspectionTypeLabel }}</text>
        </view>
        <view class="flex text bor-btm">
          巡检周期：<text>{{ baseInfo.executionCycleDicLabel }}</text>
        </view>
        <view class="flex text bor-btm">
          巡检岗位：<text>{{ baseInfo.executionPostNameLabel }}</text>
        </view>
        <view class="flex text bor-btm">
          巡检人：<text>{{ baseInfo.executionUserNameLabel }}</text>
        </view>
        <view class="flex text bor-btm">
          当前巡检人：<text>{{ baseInfo.executionUserName }}</text>
        </view>
        <view class="flex text bor-btm">
          完成条件：<text>{{ baseInfo.finishConditionLabel }}</text>
        </view>
        <view class="flex text bor-btm">
          是否总评：<text>{{ commentFlag(baseInfo.overallCommentFlag) }}</text>
        </view>
      </view>
    </view>
    <view class="bor-top form-text">表单历史巡查情况</view>
    <view class="grid-body mt-30" v-for="(item, index) in positionDealList" :key="index">
      <view class="list-cell list-cell-arrow border-radius" @click="goOperationDetail(item)">
        <view class="flex flex-row-sb-c">
          <view>
            <text>[{{ index + 1 }}] </text>
            <text>{{ item.positionName }} </text>
            <text>({{ item.totalItemNum - item.noDealTotalItemNum || 0 }}/{{ item.totalItemNum || 0 }}) </text>
          </view>
          <view>
            <text
              :class="
                item.positionStatus == 2 || item.positionStatus == 4
                  ? 'red-content'
                  : item.positionStatus == 3
                  ? 'yellow-content'
                  : 'blue-content'
              "
              >{{ exceptionNum(item) }}
            </text>
          </view>
        </view>
      </view>
    </view>
    <uni-forms
      ref="form"
      :modelValue="formData"
      :rules="rules"
      labelWidth="120px"
      labelPosition="top"
      style="margin-bottom: 107px"
    >
      <view class="mt-20" v-if="baseInfo.overallCommentFlag == 1">
        <view class="background-white">
          <uni-forms-item name="overallComment" label="填写总评">
            <textarea
              v-model="formData.overallComment"
              class="text-area"
              placeholder="请您填写总评内容(限100字)"
              :maxlength="100"
            />
          </uni-forms-item>
        </view> </view
    ></uni-forms>

    <view class="submit-group">
      <button class="u-button block" :ripple="true" @click="submit">巡检完毕</button>
    </view>
  </view>
</template>

<script>
import { queryTaskDetail, savePositionHandle } from '@/api/equipment/Inspection-new'
import Empty from '@/components/cu-empty/index.vue'
export default {
  name: 'deal',
  components: {
    Empty
  },
  data() {
    return {
      subTaskId: '',
      formData: {
        id: '',
        overallComment: ''
      },
      baseInfo: {},
      positionDealList: [],
      rules: {
        overallComment: {
          rules: [
            {
              required: true,
              errorMessage: '总评内容不能为空'
            }
          ]
        }
      }
    }
  },
  onLoad({ subTaskId }) {
    this.subTaskId = subTaskId
    this.getDetail()
  },
  onShow() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      queryTaskDetail(this.subTaskId).then((res) => {
        this.baseInfo = res.data && res.data.baseInfo ? res.data.baseInfo : {}
        this.positionDealList = res.data && res.data.positionDealList ? res.data.positionDealList : []
      })
    },
    commentFlag(overallCommentFlag) {
      if (overallCommentFlag == 0) {
        return '否'
      }
      return '是'
    },
    exceptionNum(item) {
      if (item.positionStatus == 2) {
        return `${item.exceptionNum}个异常`
      }
      return item.positionStatusLabel
    },
    goOperationDetail(item) {
      uni.navigateTo({
        url:
          '/pages/work/inspectTask/components/executetTask?subTaskPositionId=' +
          item.id +
          '&deviceId=' +
          item.deviceId +
          '&positionName=' +
          item.positionName
      })
    },
    submit() {
      this.$refs.form.validate().then((res) => {
        let data = {
          finishCondition: this.baseInfo.finishCondition,
          overallCommentFlag: this.baseInfo.overallCommentFlag,
          overallComment: this.formData.overallComment,
          subTaskId: this.subTaskId,
          taskId: this.baseInfo.taskId,
          positionList: this.positionDealList
        }
        savePositionHandle(data).then(() => {
          this.$modal.msgSuccess('保存成功')
          this.navigateBack()
        })
      })
    },
    navigateBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  .background-white {
    background-color: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    .uni-forms-item__label {
      color: #333;
      font-size: 30rpx;
    }
    .text {
      padding-bottom: 20rpx;
      padding-top: 4rpx;
      color: #333;

      text {
        color: #666;
      }
    }
  }
}
.red-content {
  color: rgb(227, 12, 12);
}
.yellow-content {
  color: rgba(243, 197, 27, 1);
}
.blue-content {
  color: rgb(122, 199, 86);
}
uni-text {
  margin-right: 25rpx;
}
.form-text {
  color: rgba(17, 200, 229, 1);
  padding-left: 10px;
  box-sizing: border-box;
}
</style>
